<template>
    <div class="article">
        <el-row>
            <el-input v-model="article.title" placeholder="添加文章标题"></el-input>
        </el-row>
         <el-row>
            <el-input v-model="article.author" placeholder="添加作者"></el-input>
        </el-row>
         
         <el-select v-model="article.type" placeholder="选择文章类别">
             <el-option v-for="item in $store.state.classType.classtype " :key="item.id" :label="item.type" :value="item.type"></el-option>
        </el-select>
        <Editor :onChangeContent="changeContent"></Editor>  
        <el-row>
            <el-button @click="createArticle">创建文章</el-button>
        </el-row>
    </div>
</template>

<script>
    import {addArticle} from "@/api/article"
    import Editor from "@/components/Editor"
    export default {
        data(){
            return {
                article:{
                    type:"",
                    title:"",
                    author:"",
                    content:"" //文章内容
                } 
            }
        },
        components:{
            Editor
        },
        mounted() {
         
        },  
        methods: {
            changeContent(html){
                console.log(html,"html")
                this.article.content = html
            },
            createArticle(){
                //创建文章
                addArticle(this.article).then(res=>{
                    console.log(res,"res")
                })
            }
        },

    }
</script>

<style >
    .article .el-select-dropdown {
        z-index:22222
    }
</style>